<template>
	<view >
		<view class="navbar">
			<unicloud-db @load="handleLoad" v-slot:default="{data, loading, error, options}" 
				collection="my-music-categories" field="_id as id,name,icon,sort" where="parentID==''"
				orderby="sort asc">
				<view v-if="error">{{error.message}}</view>
				<view v-else-if="loading" style="font-size: 0.5rem;color: #C7C7C7;">正在加载...</view>
				<view v-else>
					<view style="display: flex;">
						
						<template v-for="(item,index) in data">
							<view @click="myloadData(item)" :class="[catgoryId==item.id?'navbar-active':'']"
								class="navbar-text" >
								<i :class="item.icon" style="margin-right:0.2rem;margin-top: 0.2rem;"></i>
								{{item.name}}
							
							<unicloud-db v-slot:default="{data, loading, error, options}" 
								collection="my-music-categories" field="_id as id,name,icon,sort"  :where="`parentID=='${item.id}'`">
								<view v-if="error">{{error.message}}</view>
								<view v-else>
									<view class="navbar-child" style="z-index: 9999;">
									<view @click.stop="myloadData(child)" class="navbar-child-item"
										:class="[catgoryId==child.id?'navbar-active':'']" v-for="(child,indexs) in data"
										:key="indexs">
										{{child.name}}
									</view>
									</view>
								</view>
							</unicloud-db>
							</view>
						</template>
					</view>
				</view>
			</unicloud-db>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			'catgoryId': String,
		},
		name: "my-navbar",
		data() {
			return {
				showMenu: false,
				menus: '',
			};
		},
		methods: {
			handleLoad(data, ended, pagination) {
				// `data` 当前查询结果
				// `ended` 是否有更多数据
				// `pagination` 分页信息 HBuilderX 3.1.5+ 支持
				console.log(data)
				this.menus = data
			},
			myloadData(id) {
				// 调用父组件方法
				this.$emit('myloadData', id)
				
			}
		}
	}
</script>

<style>

</style>
